//导入react和react-dom
// react负责创建元素-虚拟的Dom
import React from 'react';
// reactDOM负责渲染react元素
import ReactDOM from 'react-dom';

// React中JSX-插值表达式
// 变量也能作为表达式
// 基础类型：string、number boolean null undefined
// 引用类型：数组、对象、函数

const obj = {
  type: 'lz',
  childer: '23',
  props: {
    a: '123',
  },
};

const obj1 = [<div>React</div>, <div>Vue</div>, <div>Js</div>];

const list = (
  <div>
    {/* <h1>{obj}</h1> */}
    <h1>{obj.type}</h1>
    {/* 对象不能在插值表达式使用 */}
    <h1>{obj1}</h1>
  </div>
);

// 渲染元素到页面
// 语法：ReactDOM.render（react元素，真实的dom作为挂载点）
ReactDOM.render(list, document.getElementById('root'));
